<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="60%" align-center destroy-on-close @closed="$emit('closed')" :close-on-press-escape="mode != 'show' ? false : true">
        <el-container>
            <el-aside width="200px" v-loading="menuloading">
                <el-container>
                    <el-header>
                        <el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>
                    </el-header>
                    <el-main class="nopadding">
                        <el-tree ref="menu" class="menu" node-key="id" :data="menuList" :props="menuProps" :current-node-key="''" draggable highlight-current :expand-on-click-node="false" :filter-node-method="menuFilterNode" @node-click="menuClick"></el-tree>
                    </el-main>
                </el-container>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="left-panel">
                        <el-button type="primary" @click="back">确定</el-button>
                        <el-button type="primary" icon="el-icon-plus" v-auth="'goods.add'" @click="add">新增</el-button>
                    </div>
                    <div class="right-panel">
                        <div class="right-panel-search">
                            <el-input v-model="search.bom_code" placeholder="请输入bom编码" clearable @keyup.enter="upsearch"></el-input>
                            <el-input v-model="search.goods_code" placeholder="请输入商品编码" clearable @keyup.enter="upsearch"></el-input>
                            <el-input v-model="search.goods_name" placeholder="请输入商品名称" clearable @keyup.enter="upsearch"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                            <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="nopadding">
                    <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border height="600">
                        <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                        <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                        <el-table-column label="数量" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.need_count" placeholder="数量" @focus="onFocus($event)"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="BOM编号" prop="bom_code" align="center"></el-table-column>
                        <el-table-column label="商品编码" prop="goods.goods_code" align="center"></el-table-column>
                        <el-table-column label="商品名称" prop="goods.goods_name" align="center"></el-table-column>
                        <el-table-column label="规格型号" prop="goods.goods_spec" align="center"></el-table-column>
                        <el-table-column label="商品单位" prop="goods.unit.unit_name" align="center"></el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </el-container>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<!-- <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button> -->
		</template>
	    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
        <bom-cate v-if="dialog.cate" ref="cateDialog" @success="cateHandleSuccess" @closed="dialog.cate = false"></bom-cate>
	</el-dialog>
</template>

<script>
import saveDialog from './save'
import BomCate from './bomCate.vue'
	export default {
        components: {
            saveDialog,BomCate
        },
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '选择BOM',
					edit: '编辑分类',
					show: '查看'
				},
				visible: false,
				isSaveing: false,
			    // apiObj: this.$API.goods.bom.shoplist,
			    apiObj: this.$API.goods.bom.list,
                selection: [],
                search: {
                    goods_name: null,
                    goods_code:null,
                    bom_code:null,
                    material_code:null
                },
                dialog: {
                    save: false,
                    cate: false,
                },
                menuList: [],
                menuProps: {
                    label: (data) => {
                        return data.cate_name
                    }
                },
                menuloading: false,
                menuFilterText: "",
                menuForm: {},
			}
		},
        watch: {
            menuFilterText(val) {
                this.$refs.menu.filter(val);
            }
        },
		mounted() {
		    this.getMenu();
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			selectionChange(selection) {
                this.selection = selection;
            },
            back(){
                this.$emit('success', this.selection)
                this.visible = false;
            },
            onFocus(event) {
                event.target.select();
            },
            //添加
            add() {
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('add')
                })
            },
            //本地更新数据
            handleSuccess(data, mode) {
                if (mode == 'add') {
                    this.$refs.table.refresh()
                }
            },
            //加载树数据
            async getMenu() {
                this.menuloading = true;
                var res = await this.$API.goods.bomCate.all.get();
                this.menuloading = false;
                var allNode = {id: '', cate_name: '所有'}
                res.data.unshift(allNode);
                this.menuList = res.data;
                // this.menuClick(allNode)
            },
            //树点击
            menuClick(data) {
                this.menuForm = data
                var params = {
                    cate_id: data.id,
                }
                this.$refs.table.reload(params)
            },
            //树过滤
            menuFilterNode(value, data) {
                if (!value) return true;
                return data.cate_name.indexOf(value) !== -1;
            },
		}
	}
</script>

<style>
</style>
